---
title: "Calendar"
description: A date-based UI component that enables users to view and select dates, supporting scheduling and event tracking.
order: 1
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Calendar.html#props"]
---

## Basic
A calendar displays one or more date grids, allowing users to select a single date.
<How toUse="date-and-time/calendar/calendar-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/calendar
```

## Composed components
<Composed components={['button']}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='calendar'/>

## Examples
Check out the calendar in action in the [Date Picker](/docs/components/date-and-time/date-picker) and [Date Range Picker](/docs/components/date-and-time/date-range-picker) documentation.
